<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 挂载点元素 -->
    <div id="root"></div>

    <!-- 
      类库文件

        react       React核心                window.React
        react-dom   React用于操作DOM的库       window.ReactDOM

        babel       Babel核心
    -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
      const root = ReactDOM.createRoot(document.querySelector("#root"));

      // 渲染一段字符串节点
      // root.render("Hello React");

      // 渲染一段html
      //    1. React.createElement    创建 ReactElement | VNode | VDOM
      //    2. JSX                    直接在 JS 代码中，编写 html
      //       babel 来处理  JSX -> JS
      //                    JSX -> React.createElemnet -> JS

      root.render(
        <div>
          <h1>Hello React</h1>
          <button>点我</button>
          <div>
            <p>我是一个屁</p>
            <span>没错</span>
          </div>
        </div>
      );

      // root.render("<button>按钮</button>");

      // const vNode = React.createElement("button", { id: "btn" }, "按钮");
      // console.log(vNode);
      // root.render(vNode);

      // const h1Node = React.createElement("h1", { key: "1" }, "Hello React");
      // const btnNode = React.createElement("button", { key: "2" }, "点我");
      // const pNode = React.createElement("p", { key: "1" }, "我是一个屁");
      // const spanNode = React.createElement("span", { key: "2" }, "没错");
      // const divNode = React.createElement("div", { key: "3" }, [
      //   pNode,
      //   spanNode,
      // ]);
      // const conNode = React.createElement("div", null, [
      //   h1Node,
      //   btnNode,
      //   divNode,
      // ]);

      // root.render(conNode);
    </script>
  </body>
</html>
